<div appBsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal"
     (onShown)="shown()"
     aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" >
            <div class="modal-header">
                <h4 class="modal-title">
                    {{options?.title}}
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <i aria-hidden="true" class="bi bi-x"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="row  mb-4">
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-append p-inputgroup-addon" style="border-color: #ced4da;">{{'MoveTo' | localize}}</span>
                            <input [(ngModel)]="toIndex" name="toIndex" class="form-control rounded-0"  type="number" step="1" min="0"> 
                            <span class="input-group-append">
                                <button type="button" class="btn btn-info blue btn-flat" (click)="multiMove()" >{{'Confirm' | localize}}</button>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-append p-inputgroup-addon" style="border-color: #ced4da;">{{'Shift' | localize}}</span>
                            <input [(ngModel)]="moveStep" name="moveStep" class="form-control rounded-0"  type="number" step="1" >  
                            <span class="input-group-append">
                                <button type="button" class="btn btn-info blue btn-flat"  (click)="multiShift()">{{'Confirm' | localize}}</button>
                            </span>
                        </div>
                    </div>
                </div>

                <!--<Primeng-TurboTable-Start>-->
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <p-table #dataTable
                             (onLazyLoad)="getRecordsIfNeeds($event)"
                             [value]="primengTableHelper.records"
                             rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                             [paginator]="false"
                             [lazy]="true"
                             [responsive]="primengTableHelper.isResponsive" 
                             [(selection)]="selectedDatas"  
                             selectionMode="multiple">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width:38px">
                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                </th>
                                <th style="width:140px">
                                    {{'Action' | localize}}
                                </th>
                                <th>
                                    {{'Title' | localize}}
                                </th>
                                <th style="width:160px">
                                    {{'ReleaseTime' | localize}}
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit" >
                            <tr>
                                <td style="width: 38px">
                                    <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                                 </td>
                                <td style="width:140px">
                                    <div>
                                        <a href="javascript:void(0)" class="mr-2" (click)="upSort(record)"><i class="bi bi-chevron-up text-info" title="{{'UpSort' | localize}}"></i></a>
                                        <a href="javascript:void(0)" class="mr-2" (click)="moveToFirst(record)"><i class="bi bi-chevron-double-up text-info" title="{{'MoveToFirst' | localize}}"></i></a>
                                        <a href="javascript:void(0)" class="mr-2" (click)="downSort(record)"><i class="bi bi-chevron-down text-info" title="{{'DownSort' | localize}}"></i></a>
                                        <a href="javascript:void(0)" class="mr-2" (click)="moveToLast(record)"><i class="bi bi-chevron-double-down text-info" title="{{'MoveToLast' | localize}}"></i></a>
                                    </div>
                                </td>
                                <td>
                                    <span class="p-column-title">{{'Title' | localize}}</span>
                                    <span title="{{record.title}}">
                                    {{record.title}}
                                    </span>
                                </td>
                                <td  style="width:160px">
                                    <span class="p-column-title">{{'ReleaseTime' | localize}}</span>
                                    {{record.time | luxonFormat:'yyyy-MM-dd HH:mm:ss'}}
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{'NoData' | localize}}
                    </div>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                     #paginator
                                     (onPageChange)="getRecordsIfNeeds($event)"
                                     [totalRecords]="primengTableHelper.totalRecordsCount"
                                     [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                     [showCurrentPageReport]="true"
                                     [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount"
                        >
                        </p-paginator>
                    </div>
                </div>
                <!--<Primeng-TurboTable-End>-->
            </div>

            <div class="modal-footer">
                <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold" (click)="close()">{{"Cancel" | localize}}</button>
                <button type="button"  class="btn btn-primary font-weight-bold"  [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"  (click)="save()"><i class="fa fa-save"></i> <span>{{"Confirm" | localize}}</span></button>
            </div>

        </div>
    </div>
</div>
